<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>前端播放m3u8格式视频</title>
    <!-- <link href="ckplayer/ckplayer/css/ckplayer.css" type="text/css" rel="stylesheet" /> -->
    <!-- <script src="ckplayer/ckplayer/hls.js/hls.min.js" type="text/javascript" charset="UTF-8"> </script> -->
    <!-- <script src=" https://cdn.jsdelivr.net/npm/dplayer@1.27.1/dist/DPlayer.min.js "></script> -->
    <script src=" https://cdn.jsdelivr.net/npm/hls.js@1.6.5/dist/hls.min.js "></script>
    <script src=" https://cdn.jsdelivr.net/npm/mui-player@1.8.1/dist/mui-player.min.js "></script>
    <link href=" https://cdn.jsdelivr.net/npm/mui-player@1.8.1/dist/mui-player.min.css " rel="stylesheet">
</head>
<body>
    <style>
        
    </style>
    <div>
        <video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" data-setup='{}' style='width: 100%;height: auto'>
        </video>
    </div>
    <!-- <button class="qiehuan" style="width:100px;height: 100px;background: red;margin:0 auto;line-height: 100px;color:#fff;text-align: center" >切换视频</button> -->
</body>
 
<script>
    var hls = new Hls();
    hls.loadSource('/v/test');
    hls.attachMedia(document.getElementById('myVideo'));

    var mp = new MuiPlayer(
        {
            container: '#myVideo',
            title:'Test',
            src:'/v/test',
        }
    )

    var button = document.createElement('button');
    button.innerHTML = "切换视频";
    button.onclick = function (){
        hls.loadSource('/v/testt');
        mp.reloadUrl('/v/testt');
    };
    document.body.appendChild(button);
</script>